<template>
  <div>
    <div class="all-wrap">
      <div class="all-title">海报管理</div>
      <div class="top-controllers" style="margin-bottom: 4px;">
        <el-input v-model="searchValue" clearable class="w-50 m-2" placeholder="请输入海报名称" @clear="inputClear" />
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-button type="primary" @click="addSingerFN">新增</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="title" label="标题" > </el-table-column>
      <el-table-column label="是否显示" width="100">
        <template #default="scope">
          <el-switch v-model="scope.row.isShow" active-value="1"
            inactive-value="2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595"
            @change="switchChange(scope.row)"  />
        </template>
      </el-table-column>
      <el-table-column label="排序" width="200">
        <template #default="scope">
          <el-input-number v-model="scope.row.short" :min="1" :max="1000" @change="handleChangeSort(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="Controllers" width="300">
        <template #default="scope">
          <el-button type="primary" size="small" @click="copyData(scope.row)">复制</el-button>
          <el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
          <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
            icon-color="#626AEF" title="Are you sure to delete this?" @confirm="confirmEvent(scope.row)">
            <template #reference>
              <el-button>Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" :page-size="10" layout="total, prev, pager, next" :total="dataTotal"
      @current-change="handleCurrentChange" />
    <el-dialog v-model="dialogShow" :title="popTitle" width="90%" top="2vh" destroy-on-close>
      <el-form :model="form" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div >
            <wangEdit ref="editorRef" :content="content" @editChange="editChange"/>
          </div>
        </el-form-item>
        <el-form-item label="是否显示" prop="show">
          
          <el-switch v-model="form.is_show"
            active-value="1"
            inactive-value="2"
           style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595" />
        </el-form-item>
        <el-form-item label="排序" prop="short">
          <el-input-number v-model="form.short" :min="1" :max="1000" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitEvent(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, ref, reactive, shallowRef, onMounted} from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import wangEdit from '../components/wangEdit.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { getShareList,deleteShare,addShareData,editShareData,changeShow,changeShort } from '../apis/shareController'
const ruleFormRef = ref<FormInstance>()
let searchValue = ref('')
let tableData = ref([])
let currentPage = ref(1)
let dataTotal = ref(0)
let dialogShow = ref(false)
let popTitle = ref('新增数据')
let content=ref('')
let editorRef=ref<any>(null)
let form = reactive({
  title: '',
  content: '',
  is_show: 1,
  short: 1,
})
let rules = reactive({
  title:[
    {required:true,message:'标题必填',trigger:'blur'},
    {min:1,max:30,message:'标题长度1～30',trigger:'blur'}
  ]
})
let editDataId=ref('')


const resetForm=()=>{
  form.title=""
  form.content=""
  form.is_show=1
  form.short=1
  content.value=""
}
const inputClear = () => { 
  getDataList()
}
const searchClick = () => { 
  getDataList()
}
const close=()=>{
  dialogShow.value = false
}
const addSingerFN = () => {
  
  resetForm()
  content.value=""
  popTitle.value="新增数据"
  dialogShow.value = true
  setTimeout(() => {
    console.log(editorRef.value.resetData())
  }, 100);
}
const editData = (data) => { 

  editDataId.value=data.id
  form.title=data.title
  form.content=data.content
  content.value=data.content
  form.is_show=data.isShow
  form.short=data.short
  popTitle.value="修改数据"
  dialogShow.value = true
}
const copyData=(data)=>{
  form.title=""
  form.content=data.content
  content.value=data.content
  form.is_show=data.isShow
  form.short=data.short
  popTitle.value="新增数据"
  dialogShow.value = true
}
const editChange=(value)=>{
  form.content=value
}
const confirmEvent = async(row) => { 
  let res=await deleteShare({id:row.id})
  if(res.status==200){
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    getDataList()
  }
}
const handleCurrentChange = () => { 
  getDataList()
}
const switchChange = async(row) => { 
  let res=await changeShow({id:row.id,show:row.isShow})
  if(res.status==200){
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    getDataList()
  }
}
const handleChangeSort = async(row) => { 
  let res=await changeShort({id:row.id,short:row.short})
  if(res.status==200){
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    getDataList()
  }
}
const submitEvent=async(ruleFormRef)=>{
  await ruleFormRef.validate(async(valid, fields) => {
   if(valid){
    if(popTitle.value=="新增数据"){
      let res=await addShareData(form)
      if(res.status==200){
        ElMessage({
          message: '新增成功',
          type: 'success',
        })
      }
    }else{
      let res=await editShareData({
        id:editDataId.value,
        ...form
      })
      if(res.status==200){
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        
      }
    }
    dialogShow.value = false
    getDataList()
    resetForm()
    setTimeout(() => {
      popTitle.value="新增数据"
      console.log(editorRef.value.resetData())
    }, 100);
   }
  })
}
const getDataList=async()=>{
  let res = await getShareList({
    title:searchValue.value,
    page:currentPage.value
  })
  if (res.status == 200) {
    tableData.value = res.data.list
    dataTotal.value = res.data.total
  }
}
onMounted(async () => {
  getDataList()
})
</script>
<style lang="less" scoped>
.top-controllers{
  width: 100%;
  height: 30px;
  .w-50{
    width: 200px;
    margin-right: 20px;
  }
}

</style>